<template>
    <div style="height: 100%; position: relative">
        <el-drawer
            :title="title"
            :visible.sync="show_dialog"
            direction="rtl"
            size="80%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content" ref="content">
                <el-form :model="form" :rules="rules" v-if="show_dialog" ref="editDrawer">
                    <el-form-item label="商家名称:" :label-width="formLabelWidth" prop="store_name">
                        <!-- <el-input v-model="form.store_name"></el-input> -->
                        <el-select v-model="form.store_name" filterable placeholder="请选择">
                            <el-option
                                v-for="item in storesList"
                                :key="item.store_id"
                                :label="item.store_name"
                                :value="item.store_name"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="媒体类型:" :label-width="formLabelWidth" prop="media_type">
						<el-select v-model="form.media_type" filterable placeholder="请选择">
                            <el-option
                                v-for="item in mediaList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>                     
                    <el-form-item
                        label="应用场景:"
                        :label-width="formLabelWidth"
                        prop="scenarios"
                    >
                        <el-select v-model="form.scenarios" placeholder="请选择">
                            <el-option
                                v-for="item in ScenariosList"
                                :key="item.key"
                                :label="item.des"
                                :value="item.key"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机器人名称:" :label-width="formLabelWidth" prop="robot_name">
                        <el-input v-model="form.robot_name"></el-input>
                    </el-form-item>                    
                    <el-form-item label="数据集ID:" :label-width="formLabelWidth" prop="recognize_role_dataset_Id">
                        <el-input v-model="form.recognize_role_dataset_Id"></el-input>
                    </el-form-item>
                     <el-form-item label="技能组ID:" :label-width="formLabelWidth" prop="fileskill_groupId_name">
                        <el-input v-model="form.fileskill_groupId_name"></el-input>
                    </el-form-item>                   
                    <el-form-item label="备注:" :label-width="formLabelWidth" prop="note">
                         <el-input v-model="form.note"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handleClose"
                    :loading="loading"
                    v-show="type!=='show'"
                >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { dateFormatter } from "@/common/js/util"
export default {
    props: ['dialog'],
    data() {
        return {
            loading: false,
            formLabelWidth: '180px',
            show_dialog: false,//弹窗显示
            ScenariosList:[],
            title:'新增',
            mediaList:[
                {value:'audio',label:'音频'},
                {value:'video',label:'视频'},
                {value:'image',label:'图片'}, 
                {value:'text',label:'文本'},
            ],
            form: {
                store_name: "",
                scenarios: "",
                recognize_role_dataset_Id: "",
                fileskill_groupId_name: "",
                note: "",
                media_type:'',
                robot_name:'',
            },
            rules: {
                store_name: [
                    { required: true, message: '商家名称不能为空' }
                ],
                scenarios: [
                    { required: true, message: '应用场景不能为空' }
                ],
                media_type: [
                    { required: true, message: '媒体场景不能为空' }
                ],
                robot_name: [
                    { required: true, message: '机器人姓名不能为空' }
                ],                                
                recognize_role_dataset_Id: [
                    { required: true, message: '数据集id不能为空' }
                ],
                fileskill_groupId_name: [
                    { required: true, message: '技能组id不能为空' },
                    // { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '必须包含|符号' }
                ],
            },
            type: '',
            row: '',
            Services: '',//服务类型
            scenarios: "",
            SubCateScenarios: "",
			supplierList: "",
			storesList:[]
        }
    },
    created() {
        this.default_data();
    },
    methods: {
        default_data() {
            //应用场景
            this.getScenarios();
			//供应商
			this.getStores();
		},
		getStores(){
			this.$http.post("/admin/dataService/index.php?act=merchantSet&op=getStores").then(res => {
                if (res.code == 1) {
                    this.storesList = res.data;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(err => {
                this.$message.error(err)
            })
		},
        getScenarios() {
            this.$http.post("/admin/dataService/index.php?act=qualityIntelligent&op=getScenarios").then(res => {
                if (res.code == 1) {
                    this.ScenariosList = res.data;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(err => {
                this.$message.error(err)
            })
        },
        show_dialog_fn(type, row) {
            this.type = type;
            this.show_dialog = true;
            if (type === 'add') {
                this.form = {
                    store_name: "",
                    scenarios: "",
                    recognize_role_dataset_Id: "",
                    fileskill_groupId_name: "",
                    note: "",
                    media_type:'',
                    robot_name:'',
				};
            } else if (type === 'edit') {
                this.title = '编辑';
                this.row = row;
                this.getItemDetail(row.id)
            }
        },
        cancelForm() {
            this.loading = false
            this.show_dialog = false
            clearTimeout(this.timer)
        },
        handleClose() {
            let { store_name,
                scenarios,
                recognize_role_dataset_Id,
                fileskill_groupId_name,
                 media_type,
                robot_name,
                note} = this.form;
            let findFn = (arr, key, value) => {
                return arr.find(item => item[key] == value)
            }
            let data = {
				store_name,
				store_id:findFn(this.storesList, 'store_name', store_name).store_id,
                scenarios,
                recognize_role_dataset_Id,
                fileskill_groupId_name,
                note,
                media_type,
                robot_name,                
            }
            this.$refs.editDrawer.validate(valid => {
                if (valid) {
                    if (this.type === 'edit') {
                        data.id = this.row.id;
                        this.editItemDetail(data);
                    } else if (this.type === 'add') {
                        this.addItemDetail(data);
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },
        getItemDetail(id) {
            this.$http.post("/admin/dataService/index.php?act=qualityIntelligent&op=getRobotById", { id }).then(res => {
                if (res.code != 1) {
                    this.$message.warning(res.msg);
                    this.show_dialog = false;
                    return;
                }
                this.form = res.data;
            }).catch(err => {
                this._message('error', err);
            })
        },
        addItemDetail(data) {
            if(data.fileskill_groupId_name.indexOf('|')==-1){
                    this.$message.warning('技能ID必须包含符号 |');
                     return; 
            }   
            this.$http.post("/admin/dataService/index.php?act=qualityIntelligent&op=addRobot", data).then(res => {
                if (res && res.code == 1) {
                    this.show_dialog = false;
                    this.$parent.getListData();
                    this.$message.success(res.msg);

                } else {
                    this.$message.warning(res.msg)
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        editItemDetail(data) {
            if(data.fileskill_groupId_name.indexOf('|')==-1){
                    this.$message.warning('技能ID必须包含符号 |');
                     return; 
            }         
            this.$http.post(`/admin/dataService/index.php?act=qualityIntelligent&op=alterRobot`, data).then(res => {
                if (res.code == 1) {
                    this.show_dialog = false;
                    this.$message.success(res.msg);
                    this.$parent.getListData()
                } else {
                    this.$message.warning(res.msg)
                }
            }).catch(err => {
                this._message('error', err);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    // width: 560px;
    padding-left: 10px;
}

.el-select /deep/.el-input {
    width: 360px;
}
.plantTable /deep/.el-input {
    width: auto;
}
form /deep/.el-input {
    width: 360px;
}

.demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
}

/deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
}

.demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.row_line {
    border-bottom: 1px dashed #d7d8dc;
}
.goodsInfo {
    display: flex;
    align-items: center;
}
</style>
